<template>
	<view class="content">
		<!-- 发货 -->
		<!-- 第一部分选择配送方式 -->
		<view class="distribution">
			<view class="center">
				<view class="title">
					请选择配送方式
				</view>
				<view class="mode">
					<u-radio-group class="radio" v-model="value" :wrap="wrap" @change="radioGroupChange">
						<u-radio
								@change="radioChange" 
								v-for="(item, index) in list" :key="index" 
								:name="item.name"
								:disabled="item.disabled"
								label-size="30"
							>
								{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<!-- 隐藏第二部分 -->
		<view class="distributormsg" v-show="show">
			<view class="center">
				<view class="type">
					<view class="listSpan">
						选择配送员：
					</view>
					<el-select style="width: 580rpx; border: none;" class="select" v-model="product" placeholder="请选择">
						<el-option class="select" label="库管" value="库管NB"></el-option>
						<el-option class="select" label="库管L" value="库管L"></el-option>
					</el-select>
				</view>
				<view class="Distributor">
					<view class="left">
						配送员电话
					</view>
					<view class="right">
						12345678911
					</view>
				</view>
			</view>
		</view>
		<!-- 第二部分收件人信息 -->
		<view class="distribution">
			<view class="center">
				<view class="title">
					收件人信息
				</view>
				<view class="msglist">
					<view class="list"  v-for="item in msglist">
						<view class="left">
							{{item.title}}
						</view>
						<view class="right">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			确认
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '同城配送',
					disabled: false
				},
				{
					name: '院内发货',
					disabled: false
				}
			],
			msglist:[
				{title:'收货人姓名',name:'收货人姓名'},
				{title:'收货人电话',name:'123456798'},
				{title:'收货地址',name:'四川身 成都市 高新区 天府软件园G区'},
				{title:'是否在院内',name:'是'},
					
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: '',
			wrap:true,
			show:false
		};
	},
	methods: {
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		}
	}
};
</script>

<style scoped lang="scss">
.content{
	height: 1240rpx;
	background-color: #F7F7F7;
}
.Distributor{
	display: flex;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	text-align: left;
	.left{
		width: 180rpx;
		height: 80rpx;
	}
	.right{
		width: 500rpx;
		height: 80rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
}
.distributormsg{
	width: 750rpx;
	height: auto;
	background-color: #FFFFFF;
	.center{
		width: 690rpx;
		margin: auto;
	}
}
.type {
		width: 690rpx;
		height: auto;
		display: flex;
		padding: 30rpx 0 20rpx 0;
		.listSpan {
			width: 200rpx;
			height: 100rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 100rpx;
		}

		.select {
			width: 400rpx;
			height: 60rpx;
			line-height: 60rpx;
			.el-input {
				.el-input__inner {
					width: 500rpx;
					border: none;
				}
			}
		}
	}
.btn{
	width: 670rpx;
	height: 80rpx;
	background: #0199FE;
	border-radius: 40rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	position: fixed;
	bottom: 24rpx;
	left: 40rpx;
}
.distribution{
	width: 750rpx;
	margin-top: 20rpx;
	height: auto;
	background-color: #FFFFFF;
	.center{
		width: 690rpx;
		margin: auto;
		.title{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #B3B3B3;
			margin: 32rpx 0;
		}
		.mode{
			.radio{
				width: 100%;
				height: 170rpx;
			}
			.u-radio{
				flex-direction: row-reverse;
				justify-content: space-between;
			}
		}
	}
}
.msglist{
	.list{
		display: flex;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: left;
		.left{
			width: 180rpx;
			height: 80rpx;
		}
		.right{
			width: 500rpx;
			height: 80rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	}
}
</style>